<template>
	<div>
		<span><a-rate v-model:value="dataScore" :class="lineFeed?'mb-2': ''" allow-half :disabled="disabled" @change="changeRate" /></span>
		<br v-if="lineFeed" />
		<a-input-number :value="score" :class="lineFeed?'': 'ml-20'" style="width: 160px" :min="min" :max="max" placeholder="得分" :addon-before="'总分'+ max" disabled>
			<template v-if="score" #addonAfter>
				<span v-if="score">
					<template v-if="score <= Math.floor(max / 3)"><a-typography-text type="danger">差</a-typography-text></template>
					<template v-else-if="score <= Math.floor(max / 3 * 2)"><a-typography-text type="warning">中</a-typography-text></template>
					<template v-else-if="score > Math.floor(max / 3 * 2)"><a-typography-text type="success">好</a-typography-text></template>
					<template v-else></template>
				</span>
			</template>
		</a-input-number>
	</div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
	score: {
		type: Number,
		required: false,
	},
	max: {
		type: Number,
		required: true,
	},
	min: {
		type: Number,
		required: true,
		default: 1,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
	lineFeed: {
		type: Boolean,
		default: false
	},
});
const dataScore = ref(props.score ? props.score / props.max * 5 : null);

const emit = defineEmits(["update:score"]);
const changeRate = (data) => {
	if (data) {
		emit("update:score", data / 5 * props.max);
	} else {
		emit("update:score", null);
	}

}
</script>